<template>
    <div class="right-content">
        <el-form
         :inline="true"
         class="headbtn">
         <div>
            <el-form-item>
                <el-input  placeholder="输入日程关键词"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search"></el-button>
            </el-form-item>
         </div>
         <el-form-item>
            <i class="el-icon-arrow-left"></i>
            <span class="datetitle">2021年11月16日</span>
            <i class="el-icon-arrow-right"></i>
         </el-form-item>
         <el-form-item>
             <el-button type="primary">新建日程</el-button>
            <el-button>月</el-button>
            <el-button style="margin: 0px;">周</el-button>
            <el-button style="margin: 0px">今天</el-button>
         </el-form-item>
        </el-form>
        <el-card
         shadow="hover"
         v-for="(item,index) in scheduleList"
         :key="index"
          class="card">
            <div class="cardDivleft">
                <p class="cardTitle">{{item.name}}</p>
                <p class="el-icon-time">{{item.start}}</p>
            </div>
            <div class="cardDivright">
                <p align="right" class="end">结束时间</p>
                <p align="right" style="color: rgb(243, 233, 233)">{{item.end}}</p>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  name: 'DaySchedule',
  data() {
    return {
      scheduleList: [
        {
          name: '吃饭',
          start: '2021-1-02 8:30',
          end: '2021-1-02 9:00'
        },
        {
          name: '吃饭',
          start: '2021-1-02 8:30',
          end: '2021-1-02 9:00'
        },
        {
          name: '吃饭',
          start: '2021-1-02 8:30',
          end: '2021-1-02 9:00'
        }
      ]
    }
  }
}
</script>

<style>
.headbtn{
  display: flex;
  justify-content: space-between;
}
.datetitle{
  font-family: '微软雅黑';
  font-size: 20px;
  font-weight: bolder;
  margin: 0px 15px
}
.card{
    display: flex;
    justify-content: space-between;
    height: 100px;
    margin: 0px 50px;
    margin-bottom: 20px
}
.cardDivleft{
    display: inline-block;
    width: 1050px;
}
.cardDivright{
    display: inline-block;
    width: 200px;
    font-family: '华文中宋';
}
.cardTitle{
  font-family: '华文中宋';
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 5px;
}
</style>
